<template>
    <div>
        <div class="contitle">
            <div class="title">热门资讯</div>
            <div class="desc"></div>
        </div>
        <div class="kchotlist">
            <template v-if="datalist.length > 0">
                <div v-for="(zx,index) in datalist" :key="index">
                    <zxcard :data="zx"></zxcard>
                </div>
                <div class="loadbox" v-if="!finished">
                    <van-loading v-if="loading" size="20px">加载中...</van-loading>
                    <div v-else><van-button type="default" size="small" @click.stop="onLoad">加载更多</van-button></div>
                </div>
            </template>
            <template v-else>
                <div class="loadbox">暂无数据</div>
            </template>
        </div>
    </div>
</template>

<script>
    import zxcard from '@/components/card/zxcard'
    export default {
        props:{
            zxxm:{
                type: String,
                default: ''
            },
        },
        name: "kchot",
        data(){
            return{
                datalist: [],
                limits: 5,
                page: 1,
                datatotal: 0,
                loading: false,
                finished: false,
            }
        },
        mounted (){
            this.getData()
        },
        methods: {
            getData(){
                var that = this
                that.$toast.loading()
                that.$http.jsonp('https://zg99.offcn.com/index/chaxun/getfylist/?actid=1618&callback=?', {
                    params: {
                        zxxm: that.zxxm,
                        page: that.page,
                        limits: that.limits
                    }
                })
                .then(function (res) {
                    var resjson = res.body
                    if(resjson.status=="1"){
                        that.datatotal = resjson.zcounts
                        that.datalist = that.datalist.concat(resjson.lists)
                        if (that.datalist.length >= that.datatotal) {
                            that.finished = true;
                        }
                    }else{
                        that.finished = true;
                        that.datalist = []
                    }
                })
                .finally(() => {
                    that.loading = false
                    that.$toast.clear()
                })
            },
            onLoad() {
                var that = this
                that.loading = true;
                if (that.datalist.length >= that.datatotal) {
                    that.loading = false;
                    that.finished = true;
                    return
                }
                setTimeout(() => {
                    that.page += 1
                    that.getData()
                }, 1000)
            },
        },
        components: {
            zxcard
        }
    };
</script>

<style scoped>
    .loadbox{ text-align: center; line-height: 2; padding: 5px 0px; font-size: 14px; color: #666; }
    .kchotlist{ margin-top: -10px; box-sizing: border-box; }
    .kchotlist .infotip{ padding: 10px; font-size: 12px; text-align: center; line-height: 2; color: #666; }
</style>